<template>
	<view :style="{ minHeight: sys.windowHeight + 'px' }"
		:class="[$tm.vx.state().tmVuetify.black ? 'black' : 'grey text ']">
		<tm-menubars color="primary" title="统计分析" :shadow="0">
		</tm-menubars>
		<view>
			<view class="fixed fulled  overflow" style="z-index: 8;">
				<tm-tabs :fllowTheme="false" bg-color="orange" color="yellow" @change="change" v-model="activeIndex"
					:list="list" range-key="title"></tm-tabs>
			</view>
			<view style="height: 84rpx;"></view>
		</view>

		<view :class="[$tm.vx.state().tmVuetify.black ? 'black' : $tm.vx.state().tmVuetify.color || 'primary']">
			<view class=" py-32" style=""
				:class="[$tm.vx.state().tmVuetify.black ? 'grey-darken-5 bk' : $tm.vx.state().tmVuetify.color || 'primary']">
				<view class="text-size-s text-align-center text-white">
					<tm-pickersDate @confirm="selectTime" @input="changeValue"
						:showDetail="{year:true,month:true,day:false,hour:false,min:false,sec:false}">
						<text>{{ time }}</text>
					</tm-pickersDate>
				</view>
			</view>
			<view>
				<tm-sheet color="blue text">
					<view class="text-size-s text-weight-b ">月{{ month }}</view>
					<view class="charts-box">
						<qiun-data-charts type="pie" :chartData="monthData" :style="!showCanvas?'display:none':''" />
					</view>
				</tm-sheet>
				<tm-divider :fllowTheme="false" text=""></tm-divider>
				<tm-sheet color="blue text">
					<view class="text-size-s text-weight-b ">日{{day}}</view>
					<view class="charts-box">
						<qiun-data-charts type="pie" :chartData="dayData" :style="!showCanvas?'display:none':''" />
					</view>
				</tm-sheet>
			</view>
		</view>
	</view>
</template>

<script>
	import tmMenubars from '@/tm-vuetify/components/tm-menubars/tm-menubars.vue';
	import tmTabs from "@/tm-vuetify/components/tm-tabs/tm-tabs.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmGrid from "@/tm-vuetify/components/tm-grid/tm-grid.vue"
	import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmKeyborad from "@/tm-vuetify/components/tm-keyborad/tm-keyborad.vue"
	import tmPickersDate from "@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue"
	export default {
		components: {
			tmTabs,
			tmMenubars,
			tmGrid,
			tmSheet,
			tmIcons,
			tmInput,
			tmKeyborad,
			tmPickersDate,
		},
		data() {
			return {
				time: '',
				list: ['支出', '收入'],
				activeIndex: 0,
				show: true,
				word: '',
				type: {},
				er: 0,
				times: '',
				types: [],
				month: '',
				day: '',
				charts: {},
				monthData: {},
				dayData: {},
				now: '',
				Showhiddenunits: false,
				showCanvas: true,
			};
		},
		watch: {
			Showhiddenunits(newValue, oldValue) {
				this.showCanvas = !newValue
			},
		},
		created() {
			this.sys = uni.getSystemInfoSync();
			// #ifdef H5
			this.bottom = 55
			// #endif
		},
		onLoad() {
			// #ifdef MP
			this.top = uni.upx2px(150);
			// #endif

		},
		onShow() {
			this.getCurrentTime()
			// this.$refs.teCartMonth.init();
			this.loadMonthData();
			this.loadDayData();
			// this.$refs.teCartMonthDay.init();
		},
		mounted() {
			this.getCurrentTime()
			this.judgeLogin(() => {
				this.loadType()
			});
		},
		methods: {
			changeValue(val) {
				this.Showhiddenunits = val;
			},
			loadDayData() {
				this.judgeLogin(res => {
					this.$ajax.post('/bill/statisticsday', {
						uid: res.id,
						er: this.er,
						time: this.now
					}).then(res => {
						let data = {
							title: {
								subtext: '天统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
							series: [{
								name: '天统计',
								type: 'pie',
								radius: '50%',
								data: res.data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						}
						let money = 0;
						res.data.forEach(i => {
							money = money + i.value
						})
						this.day = this.list[this.er] + money.toFixed(2) + '元'
						this.dayData = data;
					})
				})
			},
			loadMonthData() {
				this.judgeLogin(res => {
					this.$ajax.post('/bill/statistics', {
						uid: res.id,
						er: this.er,
						time: this.time
					}).then(res => {
						let data = {
							title: {
								subtext: '月统计',
								left: 'center'
							},
							tooltip: {
								trigger: 'item'
							},
							legend: {
								orient: 'vertical',
								left: 'left'
							},
							series: [{
								name: '月统计',
								type: 'pie',
								radius: '50%',
								data: res.data,
								emphasis: {
									itemStyle: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								}
							}]
						}
						let money = 0;
						res.data.forEach(i => {
							money = money + i.value
						})
						this.month = this.list[this.er] + money.toFixed(2) + '元'
						this.monthData = data;
						// a.setOption(data)
						// this.charts = a
					})
				})
			},
			loadType() {
				this.$ajax.get('/type/load/' + this.er).then(res => {
					this.types = res.data
					this.type = this.types[0];
				})
			},
			selectType(e) {
				this.type = e.data
			},
			closeKey() {
				this.show = false;
			},
			open() {
				this.show = true;
			},
			selectTime(e) {
				this.time = e.year + "/" + e.month
				this.loadMonthData();
				this.loadDayData();
				// this.$refs.teCartMonth.init();
				// this.$refs.teCartMonthDay.init();

			},
			getCurrentTime() {
				//获取当前时间并打印
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				this.time = yy + '/' + mm;
				this.now = yy + '/' + mm + '/' + dd
			},
			change(e) {
				this.word = ''
				this.type = {}
				this.er = e
				this.loadType()
				// this.$refs.teCartMonth.init();
				// this.$refs.teCartMonthDay.init();
				this.loadMonthData();
				this.loadDayData();
			},
			confirm(val) {
				this.show = true;
				if (val <= 0) {
					uni.$tm.toast('金额无效');
					return;
				}
				this.judgeLogin((res) => {
					this.$ajax.post('/bill/save', {
						type: this.type.id,
						er: this.er,
						value: val,
						uid: res.id,
						time: this.time
					}).then(res => {
						this.word = ''
						this.type = {}
					})
				});

			}
		}
	};
</script>

<style lang="scss">
	page,
	body {
		min-height: 100%;
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped></style>
